<template>
    <div class="letter-container">
        <h3>欢迎来到留言反馈界面</h3>
        <div class="content">
            <form action="" class="myform" v-model="form">
                <li class="list-item">
                    <i class="mui-icon mui-icon-contact"></i>
                    <p>姓名:</p>
                    <span>*</span>
                    <input type="text" v-model="form.name">
                </li>
                <li class="list-item">
                    <i class="mui-icon mui-icon-phone"></i>
                    <p>邮箱:</p>
                    <span>*</span>
                    <input type="text" v-model="form.email">
                </li>
                <li class="list-item">
                    <i class="mui-icon mui-icon-email"></i>
                    <p>联系电话:</p>
                    <span>*</span>
                    <input type="text" v-model="form.phone">
                </li>
                <li class="list-item">
                    <i class="mui-icon mui-icon-compose" id="write"></i>
                </li>
                <li class="list-item">
                     <textarea cols="10" rows="20" v-model="form.write"
                               placeholder="请写下对我们的建议，我们一定努力改进！">
                     </textarea>
                </li>
                <li class="list-item btn">
                    <mt-button type="primary" @click="reset">重置</mt-button>
                    <mt-button type="danger" id="btn" @click="sub">提交</mt-button>
                </li>
            </form>
            <!-- 打分区域 -->
            <h3>请给我们打分</h3>
            <div class="block">
                <el-rate class="el"
                         v-model="value2"
                         :colors="colors">
                </el-rate>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //表单的
                form: {
                    name: '',
                    email: '',
                    phone: '',
                    write: ''

                },
                value1: null,
                value2: null,
                colors: ['#99A9BF', '#F7BA2A', '#FF9900']
                // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
            }
        },
        created() {
            // this.reset();
        },
        methods: {
            reset() {
                this.form = null;
            },
            sub() {
            }
        },
        rules: {
            //表单的规则
            name: [
                {required: true, message: '请输入姓名', trigger: 'blur'},
                {min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur'}
            ],
            email: [
                {required: true,message:'请输入邮箱',trigger:'blur'}
                ],
            phone: [
                {required:true,message:'请输入电话号码',trigger:'blur'}
            ],
            write: [
                {required:true,message:'请输入对我们的意见',trigger:'blur'}
            ]
        }
    }
</script>
<style lang="scss" scoped>
    .letter-container {
        width: 100%;

        h3 {
            font-size: 50px;
            font-weight: bold;
            font-style: italic;
            color: cadetblue;
            text-align: center;
        }

        .content {
            .myform {
                width: 70%;

                .list-item {
                    padding: 0 30px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    p {
                        text-align: center;
                        font-size: 20px;
                        letter-spacing: 15px;
                    }

                    i {
                        margin-top: -10px;
                    }

                    span {
                        color: #cf2d28;
                        font-size: 18px;
                    }

                    input {
                        width: 300px;
                    }

                    .write {

                    }

                    textarea {
                        margin-left: 30px;
                    }
                }

                .btn {
                    display: flex;
                    justify-content: flex-end;

                    button {
                        margin-left: 20px;
                    }
                }
            }

            .block {
                width: 100%;
                line-height: 50px;
                text-align: center;
                font-size: 18px;

                .el {
                    width: 400px;
                    height: 50px;
                    line-height: 50px;

                }
            }
        }


    }
</style>
<style lang="scss">
    .el-rate__item {
        i {
            height: 50px;
            font-size: 25px;
            font-weight: bold;
            width: 50px;
            line-height: 50px;
        }
    }
</style>